var layer = layui.layer;
// 1. 添加类别 - 
// 添加弹窗 - 要用在弹窗中的字符串, 所以没写在标签里
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;


//点击事件，添加文章分类
$(".add").on("click",function(){
  // 弹窗  layer.open({})
  let index = layer.open({
    type:1,// 页面层
    title: '添加类别',
    content:add_str,
    area:['500px','300px'],
    //因为add-form是在弹出层上，所以必须等弹出层出现后，才能绑定submit事件
    success() {
      $(".add-form").on("submit",e => {
        e.preventDefault();
        //用JQ的serialize方法：返回的时key=value&key=value的字符串
        //form.val()返回的是对象
        let argStr = $(".add-form").serialize();
        //调用接口，把分类发给后台
        addCateAPI(argStr,res =>{
          layer.close(index);
          load();
        })
      })
    }
  });
})

//获取现有数据，铺设页面
function load() {
  acateListAPI({},res =>{
    let arr = res.data.data;
    $(".layui-table tbody").empty();
    arr.forEach(obj => {
      var theStr = `<tr>
      <td>${obj.name}</td>
      <td>${obj.alias}</td>
      <td>
        <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>

        <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
      </td>
    </tr>`;
    $(".layui-table tbody").append(theStr);
    })
  })
}
load();



//删除分类-事件委托
$(".layui-table tbody").on("click",".delete",function(){
  delCateAPI($(this).attr("myid"),res =>{//$(this).attr("myid")拿到这条数据绑定的id值
    $(this).parents("tr").remove();
  })
})



// 编辑分类
// 也要用在弹窗上面
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;
// 事件委托 - 编辑按钮 - 点击事件
$(".layui-table tbody").on("click",".edit",function(){
  //出现弹出层，要出现默认值
  var Id = $(this).attr("myid");
  var name = $(this).attr("data-name");
  var alias = $(this).attr("data-alias");


  let index = layer.open({
    type:1,// 页面层
    title: '编辑分类',
    content:edit_str,
    area:['500px','300px'],
    //因为add-form是在弹出层上，所以必须等弹出层出现后，才能绑定submit事件
    success() {
      let form = layui.form;
      form.val("edit",{
        Id:Id,
        name,
        alias
      })
      //用户改完之后-点击提交按钮
      $(".add-form").on("submit",e => {
        e.preventDefault();
        //自己收集数据，提交给后台
        let argStr = $(".add-form").serialize();
        updateCateAPI(argStr,res => {
          layer.close(index);//关闭弹框
          load();
        })
      })
    }
  });
})
